Summary

Improves the Supernova filter ComboBox UX by showing an informational message when more than 100 filter values are available, and implements a workaround to clear the ComboBox's internal search state after selecting a filter value.

Changes Made

• Added displayLimit state (100 items) and comboBoxKey state for forcing ComboBox remount
• Extracted filter rendering logic into renderFilterOptions() function
• When >100 filtered values exist, displays an informational disabled ComboBoxOption at the bottom:
  • Without search: "Showing 100 of 450. Search to filter."
  • With search: "prod" - Showing 100 of 150. Refine search for more."
• The message includes the search query in its label to survive ComboBox's internal filtering
• Added workaround to clear ComboBox's internal search state after item selection using key increment
• Reset display limit when changing filter label or search query

Related Issues

• Fixes https://convergedcloud.slack.com/archives/C04Q0QM40KF/p1776779247792459?thread_ts=1776240945.968329&cid=C04Q0QM40KF
• Fixes [Bug](supernova): filter selection not resetting correctly #1622

Problem Statement

Original Issue

An attempt was made to implement progressive loading with a "Load more" button to handle filter labels with >100 values. However, this approach had a fundamental architectural flaw:

The Core Problem: ComboBox internally filters its children (including ComboBoxOption elements) based on the user's input query. When a user types a search query (e.g., "production"), the "Load … more items" button gets filtered out because its text doesn't match the query. This breaks progressive loading exactly when it's most needed - during filtered searches.

The ComboBox component's filtering logic (lines 340-352 in ComboBox.component.tsx):

const filteredChildren = Children.toArray(children).filter((child) => {
  if (isValidElement<ComboBoxOptionProps>(child)) {
    const optionDisplayValue = child.props.children?.toString() || child.props.label || child.props.value
    return optionDisplayValue?.toLowerCase().includes(query.toLowerCase())
  } else {
    return false  // Non-ComboBoxOption elements get filtered out
  }
})

Any element (including action buttons) that doesn't match the query gets filtered out.

Why Progressive Loading Couldn't Be Kept

Multiple approaches were attempted to make progressive loading work:

1. Using <a> tag for "Load more" - Gets filtered out (not a ComboBoxOption)
2. Using disabled ComboBoxOption - Can't be clicked (disabled blocks pointer events)
3. Using enabled ComboBoxOption - Gets selected as a value instead of loading more
4. Wrapping in div with onClick - Div wrapper gets filtered out (not a ComboBoxOption)
5. Including query in button text - Makes "Load more" survive filtering but creates unusable UX with interactive elements

The fundamental constraint: The Juno ComboBox component (from the design system) cannot be modified, and it doesn't support non-filterable items or footer content.

Chosen Solution

Instead of progressive loading, we display an informational message that:

• ✅ Survives filtering (includes query in label text)
• ✅ Cannot be selected (disabled)
• ✅ Guides users to use search (actionable guidance)
• ✅ Is clear and non-interactive (no confusing UX)

Additional workaround implemented: Force remount ComboBox using key increment to clear internal search state after selection. Without this, the search query persists and filters the dropdown when reopened.

Screenshots (if applicable)

Display Limit with NO search string

Display Limit with search string

Added workaround to clear ComboBox's internal search state after item selection using key increment

Testing Instructions

1. pnpm i
2. pnpm dev:supernova
3. Navigate to the alerts page
4. Select a filter label that has more than 100 possible values (e.g., labels with many regions/zones)
5. Verify informational message: Confirm you see "Showing 100 of X. Search to filter." at the bottom
6. Test filtering: Type a search query (e.g., "prod")
7. Verify message updates: Confirm the message shows "prod" - Showing 100 of X. Refine search for more."
8. Test selection and clearing: Select an item from the filtered results
9. Reopen dropdown: Click on the ComboBox again
10. Verify search cleared: Confirm the search input is empty and all options are visible (not filtered by previous search)

Checklist

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings or errors.
• I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

Additional Context

Future Enhancement: A feature request has been issued: #1627
These enhancements would eliminate the need for workarounds and enable proper progressive loading in the future.